import { Link, BrowserRouter as Router } from 'react-router-dom'
import { styled } from 'styled-components'
import { AppRoutes } from './Routes'
import { useStore } from './store'

const HeightHeader = '6rem'
const Wrapper = styled.div<any>`
  min-height: calc(100vh - ${HeightHeader});
  padding: 1rem;
  display: grid;
  place-items: center;

  background-color: ${props => props.bgColor || ''};
  color: ${props => props.ftColor || ''};
`

const List = styled.ul<any>`
  list-style: none;
  font-size: 1.2rem;

  background-color: ${props => props.bgColor || ''};

  & a {
    color: ${props => props.ftColor || ''};
  }
  

  height: ${HeightHeader};
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
`

const Navigator = (props:any) => {
  const todoList = useStore((state:any) => state.todoList)
  const size=todoList.length
  return (
    <List {...props}>
      <li ><Link to="/" >Root</Link></li>
      <li ><Link to={`/setting`} >Setting</Link></li>
      <li ><Link to={`/notice`} >Notice{!!size ? ` (${size})`: ''}</Link></li>
      <li ><Link to={`/step1`} >Step1</Link></li>
      <li ><Link to={`/step2`} >Step2</Link></li>
    </List>
  )
}

export default function App() {
  const bgColor = useStore((state:any) => state.bgColor)
  const ftColor = useStore((state:any) => state.ftColor)
  return (
    <Router>
      <Navigator bgColor={bgColor} ftColor={ftColor} />
      <Wrapper bgColor={bgColor} ftColor={ftColor}>
        <AppRoutes />
      </Wrapper>
    </Router>
  )
}
